<template>
  <div>
      <topnav title="编辑资料"></topnav>
      <div class="header">
        <van-uploader :after-read="afterRead" >
              <img :src='head_img' alt="">
         </van-uploader>
         
      </div>
      <div class="list">
          <li>
              <p>昵称</p>
              <input type="text" v-model="nickname">
              <a href="#"></a>
          </li>
          <li>
              <p>姓名</p>
              <input type="text" v-model="user_name">
              <a href="#"></a>
          </li>
          <li>
              <p>手机号</p>
               <input type="text" disabled="disabled" v-model="phone">
              <a href="#"></a>
          </li>
          <li>
              <p>身份证</p>
              <input type="text" v-model="id_card">
              <a href="#"></a>
          </li>
      </div>
      <div class="footer">
          <button @click="upinfo">保存</button>
      </div>
  </div>
</template>

<script>
import topnav from "../../components/topNav"
import api from "../../axios/api"
export default {
    data(){
        return{
            phone:null,
            id:null,
            nickname:null,
            user_name:null,
            id_card:null,
            fileList:[],
            head_img:null,
        }
    },
    mounted(){
        this.phone = localStorage.getItem("phone")
        this.id = localStorage.getItem("id");
        this.getinfo()
    },
  
    methods:{
        getinfo(){
           let data = {
                id:this.id,
           }
           this.$post(api.userinfo,data).then(res=>{
        if(res.code == 0){
            this.nickname = res.data.nickname
            this.user_name = res.data.user_name
            this.id_card = res.data.id_card
            this.head_img = res.data.head_img
        }else{
            this.$toast(res.error)
        }
    })
       },
       upinfo(){
           let data = {
                id:this.id,
                phone:this.phone,
                nickname:this.nickname,
                user_name:this.user_name,
                id_card:this.id_card,
           }
           this.$post(api.updateUser,data).then(res=>{
        if(res.code == 0){
            this.$toast(res.msg)
        }else{
            this.$toast(res.error)
        }
    })
       },
      afterRead(file){
          let data = {
              id:this.id,
              file :file.content,
          }
          this.$post(api.upload,data).then(res=>{
        if(res.code == 0){
            this.$toast(res.msg)
            this.head_img = res.src
        }else{
            this.$toast(res.error)
        }
      })
      }
    },
    components:{
        topnav
    }
}
</script>

<style lang="less" scoped>
.space{
    height: 8px;
    background-color: #f6f6f6;
}
.header{
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;  
    img{
        display: block;
        width: 80px;
        height: 80px;
        background-size: 100%;
        border-radius: 50%;
    }
}
.list {
    
    li{
        height: 50px;
        display: flex;
        align-items: center;
        margin: 0px 20px;
        border-bottom: 1px solid #f6f6f6;
        p{
            width: 20%;
        }
        input{
            border: none;
            color: #ff6608;
            width: 75%;
            background-color: #fff;
        }
        a{
            width: 8px;
            height: 15px;
            background: url("../../assets/user/back.png") no-repeat;
            background-size: 100%;
        }
    }
}
.footer {
   text-align: center;
    margin-top: 100px;
    button{
        width: 80%;
        height: 50px;
        border: none;
        border-radius: 20px;
        color: #fff;
        background-color: #ff6608;
    }
}


</style>